<div class="container mb-6">
  <div class="summarize fs-4">
    <h2 class="fw-bold headline fs-4 d-inline-block mb-0">{{ section.settings.headline }}</h2>
    <span class="fw-bold description px-2">{{ section.settings.description }}</span>
    {% if section.settings.enable_need_help %}
      <a
        class="fw-bold need-help 12345 cursor-pointer d-lg-inline-block d-none"
        data-bs-toggle="modal"
        data-bs-target="#needHelpModal"
      >
        {{- 'sections.accessories_selection.need_help' | t -}}
      </a>
      <a
        class="fw-bold need-help cursor-pointer d-lg-none d-lg-inline-block"
        data-bs-toggle="offcanvas"
        data-bs-target="#offcanvasBottom"
        aria-controls="offcanvasBottom"
      >
        {{- 'sections.accessories_selection.need_help' | t -}}
      </a>
    {% endif %}
  </div>
  <div class="row mt-4 mt-lg-5">
    {% assign active_index = '' %}
    {% comment %} {% for block in section.settings.products %}
      {% liquid
        if block.available
          assign active_index = forloop.index
          break
        endif
      %}
    {% endfor %} {% endcomment %} 
    {% for block in section.settings.products %}
      <div class="col-lg-6 col-xxl-4 col-12 mb-2 mb-md-4">
        <div
          class="
            item-accessories as-item-accessories h-100 border {% if block.available == false %} sold-out {% else %} cursor-pointer {% endif %} {% if active_index == forloop.index %} active {% endif %} rounded-2
            overflow-hidden p-3 p-lg-4 d-flex position-relative
          "
          data-index="{{ forloop.index }}"
          data-type="required"
          data-available="{{ block.available }}"
          data-variantid="{{ block.selected_or_first_available_variant.id }}"
          data-price="{{ block.price }}"
          data-compared="{{ block.compare_at_price }}"
        >
          {% liquid
            assign image_src = block.images[0]
          %}
          <div class="product-img flex-shrink-0">
            <img
              class="w-100 h-100"
              src="{{ image_src | img_url: 'master' }}"
              alt="{{ image_src | escape }}"
              loading="lazy"
            >
          </div>
          <div class="d-lg-flex flex-grow-1 justify-content-between d-none">
            <div class="product-msg ms-lg-3 me-lg-4">
              <div class="name fw-bold">{{ block.title }}</div>
              {% if block.available == false %}
                <div class="sold-out-tips fw-bold pt-2">{{ 'products.product.sold_out' | t }}</div>
              {% endif %}
              <div class="description pt-2">{{ block.description }}</div>
            </div>
            <div class="price text-end">
              <div class="price-new text-nowrap">{{ block.price | money }}{%- render 'tax-inclusive' target: block.selected_or_first_available_variant, tax_class: "text-nowrap" -%}</div>
              <div class="price-old text-decoration-line-through pt-2">{{   block.compare_at_price | money }}</div>
            </div>
          </div>
          <div class="d-lg-none d-block ms-3">
            <div class="product-msg">
              <div class="name fw-bold">{{ block.title }}</div>
              {% if block.available == false %}
                <div class="sold-out-tips fw-bold pt-2">{{ 'products.product.sold_out' | t }}</div>
              {% endif %}
            </div>
            <div class="price d-flex mt-2 align-items-center">
              <div class="price-new">{{ block.price | money }}</div>
              {% if block.compare_at_price > block.price %}
                <div class="price-old ms-2 text-decoration-line-through">{{ block.compare_at_price | money }}</div>
              {% endif %}
              {%- render 'tax-inclusive' target: block.selected_or_first_available_variant, tax_class: "text-nowrap ms-2" -%}
            </div>
            <div class="description mt-2">{{ block.description }}</div> 
          </div>
          <div class="sign-label position-absolute">
            <span class="position-absolute" style="top:-5px;">
              <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.5 8.99997L0 4.49997L0.707 3.79297L4.5 7.58547L11.293 0.792969L12 1.49997L4.5 8.99997Z" fill="white"/>
              </svg>
            </span>
          </div>
        </div>
      </div>
    {% endfor %}
    <div class="col-lg-6 col-xxl-4 col-12 mb-2 mb-md-4">
      <div
        class="
          item-accessories border h-100 as-item-accessories fw-bold rounded-2 d-flex align-items-center  
          px-4 px-lg-5 py-5 py-lg-4 cursor-pointer position-relative overflow-hidden {% if active_index == '' %} active {% endif %}
        "
        data-type="noRequired"
        data-money="100"
      >
        {{ 'sections.accessories_selection.no_accessories_required' | t }}
        <div class="sign-label position-absolute">
          <span class="position-absolute" style="top:-5px;">
            <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.5 8.99997L0 4.49997L0.707 3.79297L4.5 7.58547L11.293 0.792969L12 1.49997L4.5 8.99997Z" fill="white"/>
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
  {% comment %} modal {% endcomment %}
  <div
    class="modal fade modal-lg"
    id="needHelpModal"
    tabindex="-1"
    aria-labelledby="needHelpModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content p-7 position-relative">
        <span class="position-absolute modal-close cursor-pointer" data-bs-dismiss="modal" aria-label="Close">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="24" height="24" fill="white" style="mix-blend-mode:multiply"/>
            <path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM16.05 17.25L12 13.2L7.95 17.25L6.75 16.05L10.8 12L6.75 7.95L7.95 6.75L12 10.8L16.05 6.75L17.25 7.95L13.2 12L17.25 16.05L16.05 17.25Z" fill="black" fill-opacity="0.4"/>
          </svg>
        </span>
        <div class="modal-body">
          {% for block in section.blocks %}
            {% if block.type == 'headline_popup' %}
              <div class="headline fw-bold h3 {% if forloop.last %} mb-0 {% else %} mb-3 {% endif %}">
                {{ block.settings.headline }}
              </div>
            {% endif %}

            {% if block.type == 'des_popup' %}
              <div class="description {% if forloop.last %} mb-0 {% else %} mb-4 {% endif %}">
                {{ block.settings.description }}
              </div>
            {% endif %}

            {% if block.type == 'image_popup' %}
              <div class="w-100 {% if forloop.last %} mb-0 {% else %} mb-4 {% endif %}">
                {% if block.settings.image != blank %}
                  <img
                    class="object-fit-cover w-100"
                    src="{{ block.settings.image | img_url: 'master' }}"
                    loading="lazy"
                    alt="{{ block.settings.image.alt | escape }}"
                  >
                {% else %}
                  <div class="object-fit-cover w-100 h-100">
                    {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                    {% assign placeholder = 'collection-' | append: num %}
                    {{ placeholder | placeholder_svg_tag: 'logo placeholder-svg' }}
                  </div>
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  {% comment %} offcanvas {% endcomment %}
  <div
    class="offcanvas offcanvas-bottom rounded-4 rounded-bottom-left-0 rounded-bottom-right-0"
    tabindex="-1"
    id="offcanvasBottom"
    aria-labelledby="offcanvasBottomLabel"
  >
    <div class="d-flex justify-content-end w-100 position-relative py-4">
      <span class="position-absolute offcanvas-close cursor-pointer" data-bs-dismiss="offcanvas" aria-label="Close">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="24" height="24" fill="white" style="mix-blend-mode:multiply"/>
          <path d="M12 1.5C6.15 1.5 1.5 6.15 1.5 12C1.5 17.85 6.15 22.5 12 22.5C17.85 22.5 22.5 17.85 22.5 12C22.5 6.15 17.85 1.5 12 1.5ZM16.05 17.25L12 13.2L7.95 17.25L6.75 16.05L10.8 12L6.75 7.95L7.95 6.75L12 10.8L16.05 6.75L17.25 7.95L13.2 12L17.25 16.05L16.05 17.25Z" fill="black" fill-opacity="0.4"/>
        </svg>
      </span>
    </div>
    <div class="offcanvas-body">
      {% for block in section.blocks %}
        {% if block.type == 'headline_popup' %}
          <div class="headline fw-bold h3 {% if forloop.last %} mb-0 {% else %} mb-3 {% endif %}">
            {{ block.settings.headline }}
          </div>
        {% endif %}
        {% if block.type == 'des_popup' %}
          <div class="description {% if forloop.last %} mb-0 {% else %} mb-4 {% endif %}">
            {{ block.settings.description }}
          </div>
        {% endif %}
        {% if block.type == 'image_popup' %}
          <div class="w-100 {% if forloop.last %} mb-0 {% else %} mb-4 {% endif %}">
            {% if block.settings.image != blank %}
              <img
                class="object-fit-cover w-100"
                src="{{ block.settings.image | img_url: 'master' }}"
                loading="lazy"
                alt="{{ block.settings.image.alt | escape }}"
              >
            {% else %}
              <div class="object-fit-cover w-100 h-100">
                {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                {% assign placeholder = 'collection-' | append: num %}
                {{ placeholder | placeholder_svg_tag: 'logo placeholder-svg' }}
              </div>
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="position-fixed toast-area border-0">
    <div
      id="as-toast"
      class="toast hide rounded-1 py-3 px-lg-0 px-3 toast-content border-0"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
      data-bs-delay="2000"
    >
      <div class="d-flex align-items-center">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_802_2299)">
          <path d="M12 1.5C9.92329 1.5 7.89323 2.11581 6.16651 3.26957C4.43979 4.42332 3.09398 6.0632 2.29926 7.98182C1.50454 9.90045 1.29661 12.0116 1.70175 14.0484C2.1069 16.0852 3.10692 17.9562 4.57538 19.4246C6.04383 20.8931 7.91475 21.8931 9.95155 22.2982C11.9883 22.7034 14.0995 22.4955 16.0182 21.7007C17.9368 20.906 19.5767 19.5602 20.7304 17.8335C21.8842 16.1068 22.5 14.0767 22.5 12C22.5 9.21523 21.3937 6.54451 19.4246 4.57538C17.4555 2.60625 14.7848 1.5 12 1.5ZM12 21C10.22 21 8.47991 20.4722 6.99987 19.4832C5.51982 18.4943 4.36627 17.0887 3.68508 15.4442C3.00389 13.7996 2.82566 11.99 3.17293 10.2442C3.5202 8.49836 4.37736 6.89471 5.63604 5.63604C6.89471 4.37737 8.49836 3.5202 10.2442 3.17293C11.99 2.82567 13.7996 3.0039 15.4441 3.68508C17.0887 4.36627 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.3869 21 12 21Z" fill="#007AFF"/>
          <path d="M12.75 6H11.25V14.25H12.75V6Z" fill="#007AFF"/>
          <path d="M12 16.5C11.7775 16.5 11.56 16.566 11.375 16.6896C11.19 16.8132 11.0458 16.9889 10.9606 17.1945C10.8755 17.4 10.8532 17.6262 10.8966 17.8445C10.94 18.0627 11.0472 18.2632 11.2045 18.4205C11.3618 18.5778 11.5623 18.685 11.7805 18.7284C11.9988 18.7718 12.225 18.7495 12.4305 18.6644C12.6361 18.5792 12.8118 18.435 12.9354 18.25C13.059 18.065 13.125 17.8475 13.125 17.625C13.125 17.3266 13.0065 17.0405 12.7955 16.8295C12.5845 16.6185 12.2984 16.5 12 16.5Z" fill="#007AFF"/>
          </g>
          <defs>
          <clipPath id="clip0_802_2299">
          <rect width="24" height="24" fill="white"/>
          </clipPath>
          </defs>
        </svg>
        <div class="ps-2">{{ 'sections.accessories_selection.tips' | t }}</div>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Accessories selection",
  "tag": "section",
  "class": "accessories-selection as-accessories-selection",
  "settings": [
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Description"
    },
    {
      "type": "checkbox",
      "id": "enable_need_help",
      "label": "Enable “Need help”",
      "default": true
    },
    {
      "type": "product_list",
      "id": "products",
      "label": "Products"
    }
  ],
  "blocks": [
    {
      "type": "headline_popup",
      "name": "Headline for help popup",
      "settings": [
        {
          "type": "text",
          "id": "headline",
          "label": "Headline"
        }
      ]
    },
    {
      "type": "des_popup",
      "name": "Des for help popup",
      "settings": [
        {
          "type": "text",
          "id": "description",
          "label": "Description"
        }
      ]
    },
    {
      "type": "image_popup",
      "name": "Image for help popup",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
    }
  ]
}
{% endschema %}
